import React, {useState, useContext} from 'react';
import {useMount} from 'ahooks';
import {View, Text} from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {
  NavigationContainer,
  useNavigationContainerRef,
} from '@react-navigation/native';
import {useSelector, useDispatch} from 'react-redux';
import {setRouteDate} from '@/store';
import globalStyle from '@/style/global.less';
import GlobalContext from '@/GlobalContext';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();

import Icon from '@/Icon';

import Home from './Home';
// import Netdisk from './Netdisk';
import Found from './Found';
import Book from './Book';
import Mine from './Mine';

const MainTab = () => {
  return (
    <Tab.Navigator
      screenOptions={{headerShown: false}}
      sceneContainerStyle={[globalStyle.boxViewBasic]}
      backBehavior="none">
      <Tab.Screen
        name="Home"
        options={{
          title: 'Home',
          tabBarIcon: ({color}) => (
            <Icon name="Home" color={color} width={24} height={24} />
          ),
        }}
        component={Home}
      />
      <Tab.Screen
        name="Found"
        options={{
          title: 'Found',
          tabBarIcon: ({color}) => (
            <Icon name="Found" color={color} width={24} height={24} />
          ),
        }}
        component={Found}
      />
      <Tab.Screen
        name="Book"
        options={{
          title: 'Book',
          tabBarIcon: ({color}) => (
            <Icon name="Book" color={color} width={24} height={24} />
          ),
        }}
        component={Book}
      />
      <Tab.Screen
        name="Mine"
        options={{
          title: 'Mine',
          tabBarIcon: ({color}) => (
            <Icon name="Mine" color={color} width={24} height={24} />
          ),
        }}
        component={Mine}
      />
    </Tab.Navigator>
  );
};
export default () => {
  const {eventEmitterGlobal} = useContext(GlobalContext);

  const dispatch = useDispatch();
  const routeData = useSelector(state => state.routeData.value);
  const accountInfo = useSelector(state => state.accountInfo.value);
  const isSignedIn = !!accountInfo?.account_id;

  const navigationRef = useNavigationContainerRef();
  const onRouteChange = () => {
    const route = navigationRef.getCurrentRoute();
    const state = navigationRef.getState();
    dispatch(setRouteDate(route));
    // try {
    //   const v = route.name;
    //   if (routerMap.has(v)) {
    //     AsyncStorage.setItem('pageRouteName', v);
    //   }
    // } catch (e) {
    //   console.log('保存页面路径异常', e.message);
    // }
  };
  useMount(async () => {
    // const v = await AsyncStorage.getItem('pageRouteName');
    // if (!routerMap.has(v)) {
    //   return;
    // }
    // setTimeout(() => {
    //   if (navigationRef.isReady()) {
    //     console.log('跳转上一次路由', v);
    //     navigationRef?.navigate(v);
    //   }
    // });
  });
  // return <Text>OK</Text>
  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={() => {
        onRouteChange();
      }}
      onStateChange={state => {
        onRouteChange();
      }}>
      <Stack.Navigator screenOptions={{headerShown: false}}>
        <Stack.Screen name="BottomNav" component={MainTab} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};
